<template>
    <div class="pageCon">
        <img class="payImg" src="@/assets/giveMeMoney.jpg" alt="">
        <div>{{ timeLeft }}</div>
    </div>
</template>

<style scoped lang="scss">
.pageCon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;

    .payImg {
        height: 400px;
    }
}
</style>

<script setup>
import { inject, onMounted, ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const timeLeft = ref(30)
const { setNeedColor } = inject('detailInf')
let timer = null
onMounted(() => {
    setNeedColor(true)

    //设置支付时间限制
    timer = setInterval(() => {
        timeLeft.value--
        if (timeLeft.value <= 0) {
            router.push('/')
        }
    }, 1000)
})
onUnmounted(() => {
    setNeedColor(false)
    clearInterval(timer)
})


</script>